<template>
	<view class="user-content p-bot60">
		<status-bar ref='statusbar' :title='title' back='0' :showSetting='vid?1:0'></status-bar>
		<view class="toTop" :style="{'--color': color,'--color_aid': color_aid}">
			<view class="user-msg flex-box align-center">
				<view class="user-head">
					<image :src="userinfo && userinfo.headimg?userinfo.headimg:staticUrl+'/images/jh_up/head.jpg'" mode="aspectFill"></image>					
					<text class="vip-tag" :style="{'background': configJson.card_font_color}" v-if='userinfo && userinfo.status == 1'>{{userinfo.vipName}}</text>
				</view>
				<view class="flex">
					<view class="flex-box align-center" v-if='userinfo'>
						<text class="user-name lines">{{userinfo.nickName}}</text>
					</view>
					<text class="user-name" v-else @click="showModal=true">立即登录</text>
					<view class="flex-box align-center mlist">
						
						<template >
							
							<view class="flex-box align-center thmeColor" :style="{'--color': color}" @click="toUrl('/userPage/sign/integralRecord',true)">
								<text v-if='nameDefinition'>{{nameDefinition.fenTitle?nameDefinition.fenTitle:'积分'}}:</text>
								<text class="n">{{ userinfo && userinfo.sign?userinfo.sign:0 }}</text>
								<text class="iconfont icon-xiangyouxiayiye"></text>
							</view>
						</template>
					</view>
				</view>
				<view class="icon-box flex-box">
					<view @click="toSign">
						<text class="icon-qiandao iconfont"></text>
						<view>签到</view>
					</view>
					<view v-if='service_state == 1' @click="toUrl('/userPage/message/messageList',true)">
						<text class="icon-conversation_icon iconfont" :data-num='userinfo.unreadMsg' :class="{unread: parseInt(userinfo.unreadMsg)>0}"></text>
						<view>消息</view>
					</view>
				</view>
			</view>
			<view class="msgList flex-box">
				<template v-if='bid == "eYiDtKWz6Qhv_bWnBJ7Knw=="'>
					<view class="msgItem" @click="toUrl('/moneyPage/capital/myMoney',true)">
						<text class="msgNum">{{money}}</text>
						<text class="msgTxt" v-if='nameDefinition'>{{nameDefinition.balanceTitle?nameDefinition.balanceTitle:'余额'}}({{unit}}{{nameDefinition.balanceUnit?nameDefinition.balanceUnit:'元'}})</text>
					</view>
					<view class="msgItem" @click="toUrl('/userPage/sign/integralRecord',true)">
						<text class="msgNum">{{ userinfo && userinfo.sign?userinfo.sign:0 }}</text>
						<text class="msgTxt" v-if='nameDefinition'>{{nameDefinition.fenTitle?nameDefinition.fenTitle:'积分'}}</text>
					</view>
				</template>
				
				<!--  Start 新增公众号点击进入详情页关注  -->
					<!-- official-account -->
					 <!-- 
					 <official-account>  </official-account> -->
				  <view class="msgItem msgItem_wechat" v-if='wxQRCode' @click="getWxQRCode">  
				 
						  <image :src="imgUrl+'/Uploads/singleSale/singleSaleShopH5/demoTpl/2/static/icon/WeChat.png'"  class="weixin_img"></image>
						  <text>关注公众号</text>
						  
				  </view>
				
				<!--  End 新增公众号点击进入详情页关注  -->
				
				<view class="msgItem" @click="toUrl('/userPage/user/discount_coupon',true)">
					<text class="msgNum">{{ userinfo && userinfo.couponCount?userinfo.couponCount:0}}</text>
					<text class="msgTxt">优惠券</text>
				</view>
				
				<template v-if='bid != "eYiDtKWz6Qhv_bWnBJ7Knw=="'>
					<view class="msgItem" @click="toUrl('/userPage/user/CollectList',true)">
						<text class="msgNum">{{ userinfo && userinfo.collectCount?userinfo.collectCount:0}}</text>
						<text class="msgTxt">收藏夹</text>
					</view>
					
				</template>
				
				<view class="msgItem" @click="toUrl('/userPage/user/viewed',true)">
					<text class="msgNum">{{footprint}}</text>
					<text class="msgTxt">足迹</text>
				</view>
			</view>
			
			<!-- 已是会员 -->
			<view class="iAmVip" v-if='userinfo && userinfo.status == 1'>
				<view class="vipCard">
					<image :src="imgUrl + configJson.card_bgimg" mode="scaleToFill"></image>
					<view class="vip-more" v-if='configJson.content' @click="toUrl('/userPage/user/aboutUs?type=1&title='+configJson.entrance_name,false)" 
						:style="{color: configJson.card_font_color}">
						<text>{{ configJson.entrance_name }}</text>
						<text class="iconfont icon-xiangyouxiayiye"></text>
					</view>
					<view class="vip-number" v-if='configJson' :style="{
						left: configJson.number_position.x+'%',
						top: configJson.number_position.y+'%',
						color: configJson.card_font_color,
						fontSize: configJson.number_size + 'rpx'
					}">{{ userinfo.sn_id }}</view>
				</view>
			</view>
			<!-- 不是会员-->
			<view class="notVip" v-else @click="showModal=true">
				<view class="card-box">
					<image class="card" :src="imgUrl + configJson.card_bgimg" mode="scaleToFill"></image>
				</view>
				<image class="halfCicle" :src="staticUrl+'/images/jh_up/halfCicle.png'"></image>
			</view>
		</view>
		<!-- 订单中心 -->
		<view class="orderBox" v-if='configJson'>
			<view class="orderCenter">
				<view class="title flex-box align-center">
					<text class="orderTitle flex">订单中心</text>
					<text class="lookAll" @click="toUrl('/pages/index/orderList',true)">查看全部订单</text>
					<text class="iconfont icon-xiangyouxiayiye"></text>
				</view>
				<view class="orderSort" v-if='configJson'>
					<view @click="toUrl('/pages/index/orderList?status=0',true)" :data-num='orderCount.unpay' :class="{unread: parseInt(orderCount.unpay)>0}">
						<image class="orderIcon" :src="staticUrl+'/images/jh_up/icon-daifukuan.png'" mode="aspectFit"></image>
						<text>待支付</text>
					</view>
					<view @click="toUrl('/pages/index/orderList?status=3',true)" :data-num='orderCount.delivery' :class="{unread: parseInt(orderCount.delivery)>0}">
						<image v-if='configJson.delivery==2' class="orderIcon" :src="staticUrl+'/images/jh_up/icon-daihexiao.png'" mode="aspectFit"></image>
						<image v-else class="orderIcon" :src="staticUrl+'/images/jh_up/icon-daifahuo.png'" mode="aspectFit"></image>
						<text>{{ configJson.delivery=='2'?'待核销':'待收货' }}</text>
					</view>
					<view @click="toUrl('/pages/index/orderList?status=4',true)" :data-num='orderCount.comment' :class="{unread: parseInt(orderCount.comment)>0}">
						<image class="orderIcon" :src="staticUrl+'/images/jh_up/icon-daipingjia.png'" mode="aspectFit"></image>
						<!-- <text>{{ configJson.delivery=='2'?'已核销':'已完成' }}</text> -->
						<text>待评价</text>
					</view>
					<view @click="toUrl('/pages/index/orderList?status=5',true)">
						<image class="orderIcon" :src="staticUrl+'/images/jh_up/icon-yipingjia.png'" mode="aspectFit"></image>
						<text>已评价</text>
					</view>
					<view @click="toUrl('/pages/index/orderList?status=6',true)" :data-num='orderCount.refund' :class="{unread: parseInt(orderCount.refund)>0}">
						<image class="orderIcon" :src="staticUrl+'/images/jh_up/icon-tuikuan.png'" mode="aspectFit"></image>
						<text>退款/售后</text>
					</view>	
					
					<!-- #ifdef H5 -->
					<template v-if='lesson_config == 1'>
						<view @click="toUrl('/orderPage/coursePay/myCourse',true)">
							<image class="orderIcon" :src="staticUrl+'/images/jh_up/icon-myLesson.png'" mode="aspectFit"></image>
							<text>我的课程</text>
						</view>
						<view @click="toUrl('/orderPage/coursePay/myCourseList?type=2&status=1',true)">
							<image class="orderIcon" :src="staticUrl+'/images/jh_up/icon-studying.png'" mode="aspectFit"></image>
							<text>学习中</text>
						</view>
						<view @click="toUrl('/orderPage/coursePay/myCourseList?type=2&status=2',true)">
							<image class="orderIcon" :src="staticUrl+'/images/jh_up/icon-dateOut.png'" mode="aspectFit"></image>
							<text>已过期</text>
						</view>
					</template>
					<!-- #endif -->
				</view>
			</view>
		</view>
		
		
		
		<!--  我的课程 -->
		<userCurr></userCurr>
		
		<!-- 我的服务 -->
		<view class="orderBox">
			<view class="orderCenter">
				<view class="title">
					<text class="orderTitle">常用功能</text>
				</view>
				<view class="orderSort">
					<view @click="showKefu_(true)">
						<image class="orderIcon serverIcon" :src="staticUrl+'/images/jh_up/icon-ai.png'" mode="aspectFit"></image>
						<text>客服中心</text>
						<text class="thmeBg icon-zx" :style="{'--color': color}"></text>
						<view class="mask kefu-box" @click.stop='showKefu_(false)' v-if='showKefu'>
							<view class="box flex-box thmeBg" :style="{'--color': color}">
								<view @click="call" class="flex">
									<view class="flex-box align-center flex-center">
										<image class="Icon" :src="staticUrl+'/images/jh_up/icon-hotline.png'" mode="aspectFit"></image>
										<text>热线客服</text>
									</view>
									<view>{{configJson.serviceTelTime}}</view>
								</view>
								<!-- #ifdef H5 -->
								<view class="flex" v-if='service_state != 1'>
									<view @click="contact" class="flex-box align-center flex-center">
										<image class="Icon" :src="staticUrl+'/images/jh_up/icon-chat.png'" mode="aspectFit"></image>
										<text>在线客服</text>
									</view>
									<view>{{configJson.serviceTelTime}}</view>
								</view>
								<!-- #endif -->
								<!-- #ifndef H5 -->
								<view class="flex">
									<view @click="contact" class="flex-box align-center flex-center">
										<image class="Icon" :src="staticUrl+'/images/jh_up/icon-chat.png'" mode="aspectFit"></image>
										<text>在线客服</text>
									</view>
									<view>{{configJson.serviceTelTime}}</view>
									<!-- #ifdef MP-WEIXIN -->
									<button open-type="contact" bindcontact="handleContact" class="btn-contact" v-if='service_state != 1'></button>
									<!-- #endif -->
								</view>
								<!-- #endif -->
							</view>
						</view>
					</view>
					
			
					<view @click="toUrl('/pages/distributors/fenxiaoCenter?state=1',true)" v-if="teamConfig.u_id >= 1">
						<image class="orderIcon serverIcon" :src="staticUrl+'/images/jh_up/guanli1.png'" mode="aspectFit"></image>
						<text>团队管理</text>
						<text class="thmeColor icon icon-addTodo-nav" :style="{'--color': color}"></text>
					</view>
					
					
					<view @click="toUrl('/orderPage/order/addressList',true)">
						<image class="orderIcon serverIcon" :src="staticUrl+'/images/jh_up/icon-address.png'" mode="aspectFit"></image>
						<text>地址管理</text>
						<text class="thmeBorder icon-c" :style="{'--color': color}"></text>
					</view>
					<view @click="toUrl('/pages/distributors/fenxiaoCenter?state=0',true)" v-if='mode != 0'>
						<image class="orderIcon serverIcon" :src="staticUrl+'/images/jh_up/icon-fenxiao.png'" mode="aspectFit"></image>
						<text>分享赚钱</text>
						<text class="thmeColor icon-q" :style="{'--color': color}">￥</text>
					</view>
					<view @click="toUrl('/commentPage/comment/myComment',true)" >
						<image class="orderIcon serverIcon" :src="staticUrl+'/images/jh_up/icon-comment.png'" mode="aspectFit"></image>
						<text>我的评价</text>
						<text class="iconfont icon-xuanzhong thmeColor" :style="{'--color': color}"></text>
					</view>
					<!-- 微信端走快捷登录 无需修改密码 -->
					<!-- #ifndef MP-WEIXIN -->
					<view @click="toUrl('/userPage/user/changePassword',false)" v-if='vid && vid != 0'>
						<image class="orderIcon serverIcon" :src="staticUrl+'/images/jh_up/icon-pwd.png'" mode="aspectFit"></image>
						<text>修改密码</text>
						<text class="iconfont icon-weibiaoti-_huaban thmeColor" :style="{'--color': color}"></text>
					</view>
					<!-- #endif -->
					
				
					
					<view @click="toUrl('/userPage/user/aboutUs',false)">
						<image class="orderIcon serverIcon" :src="staticUrl+'/images/jh_up/icon-aboutus.png'" mode="aspectFit"></image>
						<text>关于我们</text>
						<text class="thmeColor icon-g" :style="{'--color': color}">!</text>
					</view>
		
					
				
				</view>
			</view>
		</view>

		
		
		
		<!-- 猜你喜欢 -->
		<goodsList :goodsList="goodsList"></goodsList>
		
		
		<showModel @cancelFunc='closeModel' goHome='0' v-if='showModal' type='2'></showModel>
		
		<!-- 返回顶部 -->
		<backTop v-if='toTop'></backTop>
		
		<!-- Start 弹框识别公众号 -->
		<view class="pop_account" v-if='wxQRCode && wxQRCode_switch'>
			 <view class="popCenter">
				<image :show-menu-by-longpress='true'  :src="imgUrl+wxQRCode" mode="widthFix"></image> 
				<text class="iconfont icon-guanbi closepop" @click="getclose_wxQRCode"></text>
			 </view>
			
		 </view>
		
		<!-- End 弹框识别公众号 -->
	</view>
</template>

<script>
	import goodsList from '@/components/goodsList.vue'
	var that
	export default {
		props:['title'],
		components:{
			goodsList
		},
		data() {
			return {
				navHeight:getApp().globalData.navHeight,
				color: getApp().globalData.color,
				color_aid: getApp().globalData.color_aid,
				
				staticUrl: this.staticUrl,
				userinfo: '', // 用户信息
				money: 0,
				unit: '',
				vid: '',
				bid: uni.getStorageSync('bid'),
				mode: uni.getStorageSync('mode'), // 是否分销  0否 1是
				imgUrl: this.imgUrl,
				footprint: '0', // 足迹
				orderCount:{
					delivery: 0,
					prepare: 0,
					unpay: 0
				},
				showModal: false, // 是否显示模态框
				toTop: false,
				nameDefinition: uni.getStorageSync('startUp').nameDefinition,
				postConfig: getApp().globalData.postConfig,
				service_state: uni.getStorageSync('startUp').service_state,// 是否开起客服系统
				lesson_config: uni.getStorageSync('startUp').lesson_config,
				bid_: uni.getStorageSync('startUp').bid,
				configJson:'', // 会员卡信息
				showKefu: false,
				storeName: uni.getStorageSync('startUp').nameDefinition.storeDefinitionName,
				signInState:'0',//活动开启 1 开启   0未开启  未开启则去旧签到功能界面
				
				goodsList: [],
				goodsListCount:0, //加载第i张图片
				goodsLeftList:[], // 左侧商品列表
				goodsLeftListHeight: 0,
				goodsRightList: [], // 右侧商品列表
				goodsRightListHeight: 0,
				copyright: uni.getStorageSync('startUp').copyright,
				wxQRCode:'',
				wxQRCode_switch:false,
				wxUrl:"",
				
				teamConfig:'',  // 团队管理
			}
		},
		created() {
			that = this;
			that.showModal = false;
			that.vid = uni.getStorageSync("vid")
			// that.getUserinfo();
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid,
				imageUrl: shareData.imageUrl
			}
		},
		mounted() {
			that = this;
			// #ifdef H5
			this.H5Share()
			// #endif
			that.storeName = that.storeName?that.storeName:"店铺"
		},
		methods: {
			onImageLoad: function(e){
				let rImgH = 0;
				var goodsId = 'goods-' + e.target.dataset.id;
				uni.createSelectorQuery().in(this).select("."+goodsId).boundingClientRect(function(data) {
					rImgH += data.height
					if(that.goodsListCount==0){
						that.goodsLeftListHeight += rImgH;//第一张图片高度加到goodsLeftListHeight 
						that.goodsListCount++;
						that.goodsRightList.push(that.goodsList[that.goodsListCount]);//添加第二张图片到goodsRightList数组，因为第一张已经初始化到左侧列表中
					}else{
						that.goodsListCount++;
						if(that.goodsLeftListHeight > that.goodsRightListHeight){//把图片的高度加到目前高度更低的栏中
							that.goodsRightListHeight += rImgH;
						}else{
							that.goodsLeftListHeight += rImgH;
						}
						if(that.goodsListCount<that.goodsList.length){//根据目前的栏高，把下一张图片，push到低的那栏
							if(that.goodsLeftListHeight > that.goodsRightListHeight){
								that.goodsRightList.push(that.goodsList[that.goodsListCount]);
							}else{
								that.goodsLeftList.push(that.goodsList[that.goodsListCount]);
							}
						}
					}
				}).exec()
			},
			getUlike() { // 猜你喜欢
				that.$http.post({
					url: '/singleSaleApi/guessLikeGoods',
					data: {
						v_id: uni.getStorageSync("vid"),
						bid: uni.getStorageSync("bid")
					}
				}).then(res => {
					if (res.data) {
						if(that.goodsList.length < 1){
							that.goodsList = res.data;
							that.goodsLeftList.push(res.data[0])
						}
					}else{
						that.goodsList = []
					}
				})
			},
			applyStation(){
				if(that.userinfo.station_master == 0){
					this.toUrl('/pages/reserve/formSubmit?ordId=2147',true)
				}else{
					this.toUrl('/moneyPage/station/index',true)
				}
			},
			toSign(){
				if(that.signInState == 1){
					this.toUrl('/userPage/sign2/sign_in',true)
				}else{
					this.toUrl('/userPage/sign/sign_in',true)
				}
			},
			showKefu_(flag){
				if(that.configJson.serviceImg){
					that.toUrl('/userPage/user/aboutUs?type=2')
				}else{
					that.showKefu = flag
				}
			},
			closeModel(){
			    let that = this;
				that.showModal = false;
				that.getUserinfo();
				that.getHistory();
			},
			clear(){
				uni.clearStorageSync();
				uni.showToast({
					icon: 'success',
					title: '清理成功',
					duration: 1000
				})
				setTimeout(function() {
					that.backHome()
				}, 1000);
			},
			toUrl(url, flag) { // flag:是否判断vid
				var vid = uni.getStorageSync('vid');
				if (flag && (!vid || vid == 0)) {
					that.showModal = true;
					return
				}
				if (url) {
					if(url == '/userPage/login/binding?type=1'){
						// #ifdef MP-WEIXIN
						that.showModal = true;
						return
						// #endif
					}
					uni.navigateTo({
						url: url
					})
				}
			},
			contact: function() {
				var vid = uni.getStorageSync("vid")
				if (vid) {
					if(that.service_state == 1){ // 客服系统
						uni.navigateTo({
							url: "/userPage/message/consult"
						})
					}else{
						that.call()
					}
				} else {
					that.showModal = true
				}
			},
			getUserinfo() {// 获取用户信息
				that.vid = uni.getStorageSync("vid")
				that.$http.post({
					url: '/SRA_userIntegral/myInfo',
					data: {
						VeriCode: that.bid,
						vId: uni.getStorageSync("vid")
					}
				}).then(res => {
					if (res.data) {
						if(res.data.myJson){
							that.userinfo = res.data.myJson;
							that.teamConfig = res.data.teamConfig;
							that.orderCount = res.data.myJson.order_count
							var m = parseFloat(res.data.myJson.money)
							if (m > 9999) {
								that.unit = '万'
								m = (m / 10000).toFixed(2)
							}
							that.money = m
						}	
						if(res.data.configJson)
							that.configJson = res.data.configJson;
							that.wxQRCode = res.data.configJson.wxQRCode;  // 公众号二维码
							that.wxUrl = res.data.configJson.wxUrl;
						if(res.data.signInState)
							that.signInState = res.data.signInState
						that.getUlike()
						that.getHistory();
					}else{
						that.userinfo = ''
						that.orderCount = {
							delivery: 0,
							prepare: 0,
							unpay: 0
						}
						that.money = 0;
						uni.setStorageSync("vid",'')
					}
					uni.stopPullDownRefresh()
				}) 
			},
			getHistory() {// 获取足迹
				that.$http.post({
					url: '/singleSaleApi/footprint',
					data: {
						v_id: uni.getStorageSync("vid"),
						bid: that.bid
					}
				}).then(res => {
					if (res.data) {
						that.footprint = res.count;
					}
				}) 
			},
			getWxQRCode(){
				that.wxQRCode_switch = true;
			
			
			},
			getclose_wxQRCode(){
				that.wxQRCode_switch = false;
			}
		
		},
		onPageScroll(e) {
			if (e.scrollTop > 200) {
				that.toTop = true;
			} else {
				that.toTop = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.icon-addTodo-nav{
		position: absolute;
		left:50%;
		top:9%;
		font-size:20rpx;
	}
	.user-content{
		background-color: #F5F5F5;
	}
	.orderBox {
		margin: 24rpx 0;
		.title{
			padding: 24rpx 24rpx 10rpx 24rpx;
		}
		.icon-xiangyouxiayiye{
			font-size: 28rpx;
			color: #828282;
		}
	}
	.msgList {
		margin: 10rpx 0 0 0;
		padding-bottom: 40rpx;
		position: relative;
		z-index: 1;
		justify-content: space-around;
		.msgItem {
			text-align: center;
			flex: 1;
			.msgNum {
				font-weight: bold;
				color: white;
				display: block;
				font-size: 30rpx;
				margin-top:20rpx;
			}
			.msgTxt {
				color: white;
				opacity: .8;
			}
		}
	}
	.msgItem_wechat{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		justify-content: space-between;
		.weixin_img{
			width:70rpx;
			height: 70rpx;
		}
		text{
			width:100%;
			color:#FFFFFF;
			font-size:12px;
			opacity: 0.8;
		}
	}
	.user-msg {
		padding: 24rpx;
		padding-right: 10rpx;
		.user-head {
			position: relative;
			image{
				border-radius: 50%;
				width: 100rpx;
				height: 100rpx;
			}
			.vip-tag{
				background-color: #333333;
				color: white;
				padding: 0 10rpx;
				border-radius: 20rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -10rpx;
				font-size: 20rpx;
				white-space: nowrap;
			}
		}
		.user-name {
			color: white;
			font-size: 30rpx;
			font-weight: bold;
			margin: 0 10rpx 0 20rpx;
			position: relative;
			z-index: 99;
		}
		.mlist{
			padding-left: 20rpx;
			margin-top: 10rpx;
			view{
				background-color: #FFFFFF;
				border-radius: 40rpx;
				padding: 2rpx 10rpx 2rpx 16rpx;
				margin-right: 20rpx;
				text{
					color: inherit;
					&.n{
						font-weight: bold;
						font-size: 26rpx;
						margin-left: 4rpx;
					}
				}
				.iconfont{
					margin-left: 4rpx;
					opacity: 0.3;
				}
			}
		}
		.icon-box{
			position: relative;
			top: -2rpx;
			.icon-qiandao{
				color: white;
				font-size: 40rpx;
				padding: 0 20rpx;
			}
			.icon-conversation_icon{
				color: white;
				font-size: 40rpx;
				padding: 0 20rpx;
				position: relative;
				top: 2rpx;
			}
			view{
				text-align: center;
				color: white;
				font-size: 24rpx;
			}
		}
		
		
	}
	.vipLevel {
		background: #F9E1BE;
		height: 39rpx;
		line-height: 42rpx;
		color: #734D25;
		border-radius: 18rpx;
		display: inline-block;
		padding: 0 20rpx;
		font-size: 24rpx;
		margin: 0 6rpx 0 0;
	}
	.notVip {
		position: relative;
		z-index: 1;
		overflow: hidden;
		.card-box{
			padding: 0 20rpx;
			height: 128rpx;
			.card {
				height: 355rpx;
				border-radius: 12rpx;
			}
		}
		.halfCicle {
			height: 26rpx;
			width: 100%;
			display: block;
			position: relative;
			z-index: 3;
		}
	}
	.iAmVip {
		margin: 0 24rpx 216rpx;
		height: 160rpx;
		position: relative;
		z-index: 1;
		.vipCard {
			height: 351rpx;
			position: relative;
			.vip-more{
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				color: #333333;
				z-index: 33;
				text{
					color: inherit;
					padding-left: 6rpx;
				}
			}
			.vip-number{
				color: #333333;
				font-size: 34rpx;
				font-weight: bold;
				position: absolute;
				left: 6.5%;
				top: 60%;
			}
			image{
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
	}
	.orderCenter {
		margin: 0 24rpx;
		background: white;
		border-radius: 12rpx;
		padding-bottom: 24rpx;
		min-height: 228rpx;
		.orderTitle {
			color: #343434;
			font-size: 30rpx;
			font-weight: bold;
		}
		.lookAll {
			color: #828282;
		}
		.orderSort>view {
			display: inline-block;
			width: 20%;
			text-align: center;
			margin-top: 20rpx;
			position: relative;
			.orderIcon {
				width: 50rpx;
				height: 50rpx;
				margin: 0 auto;
				text-align: center;
				position: relative;
				
			}
			.serverIcon{position: relative;z-index: 1;}
			.serverIcon::before{position: absolute;content: '';top: 5%;left: 5%;width: 90%;height: 90%;z-index: -1;}
			text {
				display: block;
				color: #222222;
				line-height: 60rpx;
				height: 60rpx;
				white-space: nowrap;
			}
			.icon-denglu1{
				font-size: 27rpx;
				position: absolute;
				right: 46rpx;
				top: 8rpx;
				z-index: 2;
				font-weight: bold;
			}
			.icon-c{
				position: absolute;
				left: 50%;
				top: 14rpx;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				z-index: 2;
				transform: translateX(-50%);
			}
			.icon-q{
				position: absolute;
				right: 76rpx;
				top: -6rpx;
				font-size: 18rpx;
				font-weight: bold;
				z-index: 2;
			}
			.icon-z{
				position: absolute;
				right: 60rpx;
				top: 16rpx;
				width: 12rpx;
				height: 12rpx;
				z-index: 2;
				transform: scale(0.9);
			}
			
			.icon-zx{
				position: absolute;
				left: 50%;
				top: 40rpx;
				width: 8rpx;
				height: 4rpx;
				display: inline-block;
				z-index: 2;
				margin-left: -2rpx;
				border-radius: 6rpx;
				transform: translateX(-50%);
			}
			.icon-02{
				position: absolute;
				top: 4rpx;
				right: 50rpx;
				z-index: 2;
				font-size: 16rpx;
				font-weight: bold;
			}
			.icon-question{
				position: absolute;
				top: -4rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 2;
				font-size: 30rpx;
				font-weight: bold;
			}
			.icon-Fill3{
				position: absolute;
				top: -18rpx;
				    right: 54rpx;
				    z-index: 2;
				    font-size: 22rpx;
			}
			
			.icon-xuanzhong{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: -6rpx;
				font-weight: bold;
				font-size: 24rpx;
				z-index: 2;
			}
			.icon-weibiaoti-_huaban{
				position: absolute;
				right: 48rpx;
				top: 6rpx;
				font-size: 24rpx;
				font-weight: bold;
				z-index: 2;
			}
			.icon-g{
				position: absolute;
				right: 64rpx;
				top: -2rpx;
				font-size: 34rpx;
				font-weight: bold;
				z-index: 2;
			}
			.icon-bianzu{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 30rpx;
				top: -14rpx;
				font-weight: 400;
				z-index: 2;
			}
			.icon-shenqingzhanchang02{
				position: absolute;
				right: 40rpx;
				font-size: 34rpx;
				top: 6rpx;
				font-weight: 400;
				z-index: 2;
			}
			.icon-chengshihehuoren01{
				position: absolute;
				right: 42rpx;
				font-size: 42rpx;
				top: 0rpx;
				font-weight: 400;
				z-index: 2;
			}
			.icon-guanggaoshenqing01{
				position: absolute;
				right: 40rpx;
				font-size: 32rpx;
				top: 4rpx;
				font-weight: 400;
				z-index: 2;
			}
			.icon-kechengshangchuan01{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 42rpx;
				top: -8rpx;
				font-weight: 400;
				z-index: 2;
			}
			.icon-bianzu6{
				position: absolute;
				left: 48rpx;
				font-size: 24rpx;
				transform: scale(0.7);
				top: -4rpx;
				font-weight: 400;
				z-index: 2;
			}
			.icon-bianzu4{
				position: absolute;
				left: 50%;
				transform: translateX(-50%) scale(0.6);
				font-size: 24rpx;
				top: 4rpx;
				font-weight: 400;
				z-index: 2;
			}
			.icon-bianzu5{
				position: absolute;
				left: 66rpx;
				font-size: 34rpx;
				top: 6rpx;
				font-weight: 400;
				z-index: 2;
			}
			.icon-Fill4{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 22rpx;
				top: 0;
				font-weight: 400;
				z-index: 2;
			}
		}
	}

	.kefu-box{
		overflow-y: auto;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		
		.box{
			padding: 30rpx;
			background-color: white;
			z-index: 3;
			width: 100%;
			// &.noImg{
				position: fixed;
				width: calc(100% - 60rpx);
				border-radius: 12rpx;
				left: 50%;
				transform: translateX(-50%);
				@keyframes bottom {
					0% {bottom: -200rpx;}
					100% {
						bottom: calc(130rpx + constant(safe-area-inset-bottom));
						bottom: calc(130rpx + env(safe-area-inset-bottom));
					}
				}
				animation: bottom .2s ease-in-out forwards;
			// }
			>view{
				font-size: 28rpx;
				font-weight: bold;
				text{
					font-size: 28rpx;
					font-weight: bold;
				}
				position: relative;
				&:nth-child(2){
					border-left: 1px solid #EEEEEE;
				}
				.Icon{
					width: 42rpx;
					height: 42rpx;
					margin-right: 10rpx;
				}
				
			}
		}
	
		.icon-close-f{
			position: fixed;
			right: 30rpx;
			z-index: 3;
			margin-top: 30rpx;
			font-size: 50rpx;
			opacity: 0.7;
			color: #999999!important;
		}
	}
	.pop_account{
		width:100%;
		height: 100%;
		background:rgba(0,0,0,0.7);
		position: fixed;
		top:0;
		left:0;
		z-index:3444;
	}
	.popCenter{
		width:100%;
		position: absolute;
		top:50%;
		left:50%;
		text-align: center;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		.distinguish{
			color:#FFFFFF;
			font-size:16px;
			padding:20rpx 0;
			display: block;
		}
		image{
			width:100%;
			height: 100%;
		}
		.closepop{
			position: absolute;
			top:20rpx;
			left: 40rpx;
			z-index:3445;
		}
	}
	
</style>
